<template>
  <div class="box">
    <div class="box-warp">
      <div class="header">
        <el-input @input="switchJSON" v-model="valueJSON" placeholder="把内容复制进去"></el-input>
        <el-button type="primary" @click="formatting">格式化</el-button>
        <el-button type="primary" @click="remove">清除所有</el-button>
        <el-button
          v-clipboard:copy="editJson"
          v-clipboard:success="onCopy"
          v-clipboard:error="onError"
          type="primary"
          >复制</el-button
        >
        <el-button
          @click="compression"
          v-clipboard:copy="ff"
          v-clipboard:success="onCopy"
          v-clipboard:error="onError"
          type="primary"
          >复制并且压缩JSON</el-button
        >
        <el-button type="primary" @click="backJSON">上一次的JSON</el-button>
      </div>
      <div class="right">
        <json-editor
          @input="jsonEditorHandler"
          ref="jsonEditor"
          v-model="editJson"
        />
      </div>
    </div>

    <el-dialog
      title="JSON加载完成"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <span
        ><el-input
          autosize
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="ff"
        >
        </el-input
      ></span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" v-if="backfillIsShow" @click="backfill">回填</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import JsonEditor from "@/components/JsonEditor";
export default {
  data() {
    return {
      editJson: { 把我替换掉: "把我替换掉" },
      ff: "",
      dialogVisible: false,
      backfillIsShow: true,
      valueJSON: "",
    };
  },
  components: {
    JsonEditor,
  },
  mounted() {
    // console.log(JSON.parse(this.$store.state.textareaValue));
    // this.editJson = ''
    // this.editJson = JSON.parse(this.$store.state.textareaValue);
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
    },
    formatting() {
      this.editJson = JSON.parse(this.editJson);
      console.log(this.editJson);
    },
    remove() {
      this.editJson = "";
      this.valueJSON = ''
      this.$store.commit("removeTextarea");
    },
    jsonEditorHandler() {
      this.$store.commit("setTextarea", JSON.stringify(this.editJson));
    },
    onCopy() {
      // 复制第3个格式
      this.$message({
        message: "复制格式成功",
        type: "success",
      });
    },
    onError() {
      this.$message({
        message: "复制格式失败",
        type: "error",
      });
    },

    // 上一次的JSON
    backJSON() {
      this.backfillIsShow = true;
      this.dialogVisible = true;
      let json = JSON.parse(this.$store.state.textareaValue);
      this.ff = json;
    },

    // json回填
    backfill() {
      this.editJson = JSON.parse(this.ff);
      this.dialogVisible = false;
      this.$message({
        message: "回填成功",
        type: "success",
      });
    },

    compression() {
      this.backfillIsShow = false;
      this.dialogVisible = true;
      console.log(this.zipFun(this.editJson));
      this.editJson = this.compressJsonStr(this.editJson);
      this.ff = this.compressJsonStr(this.editJson);
      this.editJson = JSON.parse(this.ff);
    },
    //替换JSON
    switchJSON() {
     this.editJson = JSON.parse( this.valueJSON )
    },
    //解压缩
    unzipFun(b64Data) {
      console.log(b64Data);
      var data = "";
      try {
        var strData = atob(b64Data);
        data = window.pako.inflate(strData, {
          to: "string",
        });

        console.log(data);
        console.log(JSON.parse(data));
        return JSON.parse(data);
      } catch (ex) {
        console.log("报错了:" + ex);
        return false;
      }
    },
    // 压缩
    zipFun(str, name) {
      window.pako = require("pako");

      var binaryString = window.pako.deflate(str, {
        to: "string",
        level: 9,
      });
      console.log(btoa(binaryString));
      return btoa(binaryString);
    },
    compressJsonStr(jsonStr) {
      return JSON.stringify(JSON.parse(jsonStr));
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 1210px;
  margin: auto;
  padding-top: 10px;
}

.right {
  width: 100%;
  margin-top: 12px;
}
.header {
  display: flex;
  .el-input {
    width: 200px;
    margin-right: 10px;
  }
}
</style>
